<template>
  <div id="videoPlayer" class="videoPlayer">
    <!-- loading -->
    <div v-if="!isReady" class="loading-center prism-loading">
      <div class="circle"></div>
      <div class="circle1"></div>
    </div>
    <!-- 预览图（封面图） -->
    <div
      v-if="!isPlay && isReady"
      class="preview-pic"
      :style="`cursor: ${isCanPaly ? 'pointer' : 'default'};`"
      @click="playVideo"
    >
      <div class="preview-content">
        <img class="image" :src="previewPic" alt="" />
        <img class="play-btn" src="./image/play-btn.png" alt="" />
      </div>
    </div>
    <vue-aliplayer-v2
      v-show="isPlay"
      ref="VueAliplayerV2"
      :options="options"
      @ready="aliplayerReady"
    />
  </div>
</template>

<script>
  export default {
    name: 'aliPlayer',

    props: {
      source: {
        type: String,
        default: '',
        // require: true
      },
      vid: {
        // videoid
        type: String,
        default: '',
      },
      playauth: {
        // videoid视频播放凭证
        type: String,
        default: '',
      },
      previewPic: {
        type: String,
        default: '',
      },
      isCanPaly: {
        type: Boolean,
        default: true,
      },
			autoplay: { // 播放器是否自动播放，在移动端 autoplay 属性会失效。Safari11 不会自动开启自动播放如何开启。
        type: Boolean,
        default: false,
			}
    },

    data() {
      return {
        options: {
          // vid: '',
          // playauth: '',
          // 配置项 (options.source 不支持动态切换,需要动态切换请直接使用source)
          height: '100%',
          // source:'//player.alicdn.com/video/aliyunmedia.mp4',
          isLive: false, // 切换为直播流的时候必填,
					autoplay: this.autoplay,
          // format: 'm3u8'  //切换为直播流的时候必填
        },
        // source: '' // 播放源(此属性存在则优先于options.source) 支持动态切换,目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播rtmp流切换。
        // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
        isPlay: false, // 点击播放
        isReady: false,
      };
    },

    watch: {
      vid: {
        handler(newVal) {
          this.$set(this.options, 'vid', newVal);
        },
        immediate: true,
      },
      playauth: {
        handler(newVal) {
          this.$set(this.options, 'playauth', newVal);
        },
        immediate: true,
      },
    },

    mounted() {},

    methods: {
      playVideo() {
        this.isPlay = true;
        this.play();
      },
      play() {
        this.$refs.VueAliplayerV2.play();
      },

      pause() {
        this.$refs.VueAliplayerV2.pause();
      },

      // 重播
      replay() {
        this.$refs.VueAliplayerV2.replay();
      },

      // 切换直播模式和普通模式
      changeIsLive() {
        this.options.isLive = !this.options.isLive;
      },

      // 播放器视频初始化按钮渲染完毕
      aliplayerReady() {
        this.isReady = true;
      },
    },
  };
</script>

<style lang="less" scoped>
  /deep/ .prism-player .prism-cc-btn,
  /deep/ .prism-player .prism-setting-btn {
    display: none !important;
  }
  .videoPlayer {
    position: relative;
    width: 100%;
    height: 100%;
  }
  * {
    margin: 0;
    padding: 0;
  }
  .remove-text {
    text-align: center;
    padding: 20px;
    font-size: 24px;
  }
  .show-multiple {
    display: flex;
    .multiple-player {
      width: calc(100% / 4);
      margin: 20px;
    }
  }
  .player-btns {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    span {
      margin: 0 auto;
      display: inline-block;
      padding: 5px 10px;
      width: 150px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #eee;
      background: #e1e1e1;
      border-radius: 10px;
      text-align: center;
      margin: 5px;
      cursor: pointer;
    }
  }
  .source-box {
    padding: 5px 10px;
    margin-bottom: 20px;
    .source-label {
      margin-right: 20px;
      font-size: 16px;
      display: block;
    }
    #source {
      margin-top: 10px;
    }
    .source-input {
      margin-top: 10px;
      padding: 5px 10px;
      width: 80%;
      border: 1px solid #ccc;
    }
  }

  .preview-pic {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .preview-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      // filter: brightness(50%);
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -50%;
    }
    .play-btn {
      position: absolute;
      left: 10px;
      bottom: 10px;
      width: 60px;
      height: 60px;
    }
  }

  .prism-loading {
    width: 55px;
    height: 55px;
    z-index: 10;
    .circle {
      background-color: rgba(0, 0, 0, 0);
      border: 5px solid;
      border-color: rgba(0, 193, 222, 0.2) rgba(0, 193, 222, 0.5)
        rgba(0, 193, 222, 0.7) rgba(0, 193, 222, 0.1);
      opacity: 0.9;
      border-radius: 50px;
      width: 45px;
      height: 45px;
      margin: 0 auto;
      -moz-animation: spinoffPulse 0.9s infinite linear;
      -webkit-animation: spinoffPulse 0.9s infinite linear;
    }
  }
  @keyframes spinoffPulse {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .loading-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  /deep/ .prism-big-play-btn {
    display: none !important;
  }
</style>
